<template>
  <div>
    <el-button 
      type="primary" 
      @click="showTable = !showTable"
      style="margin-bottom: 16px;"
    >
      {{ showTable ? '隐藏耗时活动' : '显示耗时活动' }}
    </el-button>

    <el-table
      v-if="showTable"
      :data="tableData"
      style="width: 100%; margin-top: 20px;"
      border
    >
      <el-table-column prop="Type" label="类型" />
      <el-table-column prop="Tag" label="标签" />
      <el-table-column prop="HostName" label="主机名" />
      <el-table-column prop="StartTime" label="开始时间">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.StartTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="EndTime" label="结束时间">
        <template #default="scope">
          {{ formatDate(new Date(scope.row.EndTime)) }}
        </template>
      </el-table-column>
      <el-table-column prop="Duration" label="持续时间">
        <template #default="scope">
          {{ formatDuration(scope.row.Duration) }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton } from 'element-plus';
import { formatDate, formatDuration } from '../../utils/dateUtils';

const props = defineProps({
  tableData: {
    type: Array,
    required: true
  }
});

const showTable = ref(false);
</script>
